求购频道页面

components/applyPurchase/ApplyInfo.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>333</div>
+</template>

components/applyPurchase/PublishApply.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="publish-apply">
+    <div class="good-purchaser">
+      <p class="good-purchaser-title">
+        <img src="/images/applyPurchase/good-purchaser-title.png" alt="">
+      </p>
+      <ul>
+        <li>
+          <i>1</i>
+          <span>华商龙商务互联科技有限公司</span>
+        </li>
+        <li>
+          <i>2</i>
+          <span>华商龙商务互联科技有限公司</span>
+        </li>
+        <li>
+          <i>3</i>
+          <span>华商龙商务互联科技有限公司</span>
+        </li>
+        <li>
+          <i>4</i>
+          <span>华商龙商务互联科技有限公司</span>
+        </li>
+        <li>
+          <i>5</i>
+          <span>华商龙商务互联科技有限公司</span>
+        </li>
+      </ul>
+    </div>
+    <div class="publish-area">
+      <div class="publish-form">
+        <p>单个发布</p>
+      </div>
+    </div>
+    <div class="apply-rank">
+      ccc
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+  .publish-apply {
+    background: url('/images/applyPurchase/banner.png') center center/cover no-repeat;
+    height: 583px;
+    text-align: center;
+    padding-top: 290px;
+    >div {
+      display: inline-block;
+      border: 1px solid #3975f4;
+      height: 267px;
+      margin-right: 6px;
+      vertical-align: middle;
+      background: #fff;
+    }
+    .good-purchaser {
+      width: 225px;
+      .good-purchaser-title {
+        height: 55px;
+        line-height: 55px;
+        background: #3975f4;
+      }
+      ul {
+        padding: 0 22px 0 10px;
+        li {
+          line-height: 42px;
+          span {
+            float: right;
+            display: inline-block;
+            width: 152px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          i {
+            display: inline-block;
+            float: left;
+            width: 25px;
+            background: url('/images/applyPurchase/level-1.png') center no-repeat;
+            color: #fff;
+            font-size: 16px;
+            font-style: normal;
+          }
+        }
+      }
+    }
+    .publish-area {
+      width: 549px;
+      .publish-form {
+        width: 245px;
+        p {
+          padding-top: 22px;
+        }
+      }
+    }
+    .apply-rank {
+      width: 317px;
+      margin-right: 0;
+    }
+  }
+</style>

components/applyPurchase/index.js

@@ -0,0 +1,4 @@
+import ApplyInfo from './ApplyInfo.vue'
+import PublishApply from './PublishApply.vue'
+
+export { ApplyInfo, PublishApply }

components/main/Nav.vue

@@ -25,6 +25,9 @@
       <nuxt-link to="/news" class="item">
         <span>优软快讯</span>
       </nuxt-link>
+      <nuxt-link to="/applyPurchase" class="item">
+        <span>求购</span>
+      </nuxt-link>
     </div>
   </nav>
 </template>

pages/applyPurchase/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <apply-info></apply-info>
+    <publish-apply></publish-apply>
+  </div>
+</template>
+<script>
+  import { ApplyInfo, PublishApply } from '~components/applyPurchase'
+  export default {
+    components: {
+      ApplyInfo,
+      PublishApply
+    }
+  }
+</script>