求购

components/applyPurchase/ApplyInfo.vue

@@ -1,3 +1,273 @@
 <template>
-  <div>333</div>
+  <div class="apply-info">
+    <div class="apply-info-title">
+      <p>最新求购信息</p>
+      <span>海量求购，一网打尽</span>
+      <div>
+        <input type="text" class="form-control" placeholder="请输入要查找的内容" />
+        <span>查询</span>
+        <a>展开筛选</a>
+      </div>
+    </div>
+    <div class="apply-info-list">
+      <p>
+        <span>发布时间<img src="/images/applyPurchase/sort-arrow.png" alt=""></span>
+        <span>买家</span>
+        <span>型号</span>
+        <span>品牌</span>
+        <span>截止时间<img src="/images/applyPurchase/sort-arrow.png" alt=""></span>
+        <span>已报价<img src="/images/applyPurchase/sort-arrow.png" alt=""></span>
+        <span>操作</span>
+      </p>
+      <ul>
+        <li>
+          <span>2017-10-10&nbsp;11:11</span>
+          <span>158****8888</span>
+          <span>asdasdasdasd</span>
+          <span>panasonic</span>
+          <span class="date-content"><span>剩余</span><span> 8 </span>天<span> 8 </span>小时</span>
+          <span class="number-content"><span>1000</span>&nbsp;条</span>
+          <span class="btn-content">
+            <a>联系买家</a>
+            <a>我要报价</a>
+          </span>
+        </li>
+        <li>
+          <span>2017-10-10&nbsp;11:11</span>
+          <span>158****8888</span>
+          <span>asdasdasdasd</span>
+          <span>panasonic</span>
+          <span class="date-content"><span>剩余</span><span> 8 </span>天<span> 8 </span>小时</span>
+          <span class="number-content"><span>1000</span>&nbsp;条</span>
+          <span class="btn-content">
+            <a>联系买家</a>
+            <a>我要报价</a>
+          </span>
+          <div class="expand-content">
+            <div>
+              生产日期：2017-06-36
+            </div>
+            <div>
+              封装：盘装
+            </div>
+            <div>
+              采购数量：<span>5000</span>个
+            </div>
+            <div>
+              单价预算：<span>￥999</span>
+            </div>
+          </div>
+        </li>
+        <li>
+          <span>2017-10-10&nbsp;11:11</span>
+          <span>158****8888</span>
+          <span>asdasdasdasd</span>
+          <span>panasonic</span>
+          <span class="date-content"><span>剩余</span><span> 8 </span>天<span> 8 </span>小时</span>
+          <span class="number-content"><span>1000</span>&nbsp;条</span>
+          <span class="btn-content">
+            <a>联系买家</a>
+            <a>我要报价</a>
+          </span>
+        </li>
+        <li>
+          <span>2017-10-10&nbsp;11:11</span>
+          <span>158****8888</span>
+          <span>asdasdasdasd</span>
+          <span>panasonic</span>
+          <span class="date-content"><span>剩余</span><span> 8 </span>天<span> 8 </span>小时</span>
+          <span class="number-content"><span>1000</span>&nbsp;条</span>
+          <span class="btn-content">
+            <a>联系买家</a>
+            <a>我要报价</a>
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
+<style lang="scss" scoped>
+  .apply-info {
+    width: 1190px;
+    margin: 0 auto;
+    .apply-info-title {
+      border-bottom: 1px solid #3975f4;
+      >p {
+        display: inline-block;
+        width: 156px;
+        height: 33px;
+        line-height: 33px;
+        color: #fff;
+        background: #3975f4;
+        font-size: 18px;
+        text-align: center;
+        border: {
+          top-left-radius: 3px;
+          top-right-radius: 3px;
+        }
+        margin: 0;
+      }
+      >span {
+        color: #999;
+        margin-left: 16px;
+      }
+      >div {
+        float: right;
+        height: 25px;
+        line-height: 25px;
+        >input {
+          width: 241px;
+          height: 25px;
+          line-height: 25px;
+          font-size: 13px;
+          border: {
+            top-right-radius: 0;
+            bottom-right-radius: 0;
+          }
+        }
+        >span {
+          display: inline-block;
+          width: 69px;
+          color: #fff;
+          background: #3975f4;
+          text-align: center;
+          margin: 0 6px 0 -1px;
+          border: {
+            top-right-radius: 3px;
+            bottom-right-radius: 3px;
+          }
+          cursor: pointer;
+        }
+        >a {
+          background: #ffa200;
+          color: #fff;
+          width: 79px;
+          border-radius: 3px;
+          text-align: center;
+          display: inline-block;
+        }
+      }
+    }
+    .apply-info-list {
+      >p {
+        background: #ededed;
+        height: 40px;
+        line-height: 40px;
+        margin: 9px 0 0 0;
+        span {
+          display: inline-block;
+          text-align: center;
+          img {
+            width: 15px;
+            height: 14px;
+            margin:  0 0 3px 5px;
+          }
+          &:nth-child(1) {
+            width: 186px;
+          }
+          &:nth-child(2) {
+            width: 160px;
+          }
+          &:nth-child(3) {
+            width: 173px;
+          }
+          &:nth-child(4) {
+            width: 147px;
+          }
+          &:nth-child(5) {
+            width: 152px;
+          }
+          &:nth-child(6) {
+            width: 158px;
+          }
+          &:nth-child(7) {
+            width: 214px;
+          }
+        }
+      }
+      >ul {
+        margin-bottom: 29px;
+        li {
+          min-height: 67px;
+          line-height: 67px;
+          border: 1px solid #ededed;
+          >span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: inline-block;
+            text-align: center;
+            color: #3c3c3c;
+            &:nth-child(1) {
+              width: 186px;
+            }
+            &:nth-child(2) {
+              width: 160px;
+            }
+            &:nth-child(3) {
+              width: 173px;
+            }
+            &:nth-child(4) {
+              width: 147px;
+            }
+            &:nth-child(5) {
+              width: 152px;
+            }
+            &:nth-child(6) {
+              width: 158px;
+            }
+            &:nth-child(7) {
+              width: 212px;
+            }
+            &.date-content {
+              span {
+                &:first-child {
+                  font-size: 12px;
+                  color: #666;
+                }
+                color: #f71026;
+              }
+            }
+            &.number-content {
+              span {
+                color: #5392f9;
+                &.active {
+                  color: #ff9a00;
+                }
+              }
+            }
+            &.btn-content {
+              a {
+                display: inline-block;
+                width: 71px;
+                height: 28px;
+                line-height: 28px;
+                color: #fff;
+                background: #3c7cf5;
+                border-radius: 3px;
+                cursor: pointer;
+                &:first-child {
+                  background: #ffa200;
+                  margin-right: 10px;
+                }
+              }
+            }
+          }
+          .expand-content {
+            display: flex;
+            justify-content: space-between;
+            padding: 0 236px 0 36px;
+            background: #fffbf0;
+            box-shadow: 1.5px 3px 7px 0 rgb( 178, 178, 179 );
+            div {
+              display: inline-block;
+              span {
+                color: #f71026;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

components/applyPurchase/PublishApply.vue

@@ -95,6 +95,38 @@
             <th width="72">求购次数</th>
           </tr>
         </thead>
+        <tbody>
+          <tr>
+            <td>NO.<span>1</span><em>|</em></td>
+            <td>sssssssssssss<em>|</em></td>
+            <td>1000<em>|</em></td>
+            <td>10000</td>
+          </tr>
+          <tr>
+            <td>NO.<span>1</span><em>|</em></td>
+            <td>sssssssssssss<em>|</em></td>
+            <td>1000<em>|</em></td>
+            <td>10000</td>
+          </tr>
+          <tr>
+            <td>NO.<span>1</span><em>|</em></td>
+            <td>sssssssssssss<em>|</em></td>
+            <td>1000<em>|</em></td>
+            <td>10000</td>
+          </tr>
+          <tr>
+            <td>NO.<span>1</span><em>|</em></td>
+            <td>sssssssssssss<em>|</em></td>
+            <td>1000<em>|</em></td>
+            <td>10000</td>
+          </tr>
+          <tr>
+            <td>NO.<span>1</span><em>|</em></td>
+            <td>sssssssssssss<em>|</em></td>
+            <td>1000<em>|</em></td>
+            <td>10000</td>
+          </tr>
+        </tbody>
       </table>
     </div>
   </div>
@@ -243,6 +275,33 @@
             th {
               font-size: 16px;
               font-weight: bold;
+              text-align: center;
+            }
+          }
+        }
+        tbody {
+          tr {
+            height: 25px;
+            line-height: 25px;
+            &:first-child {
+              td {
+                padding-top: 10px;
+              }
+            }
+            td {
+              &:first-child {
+                color: #f6682f;
+                font-size: 12px;
+                span {
+                 font-size: 16px;
+                }
+              }
+              em {
+                font-style: normal;
+                float: right;
+                color: #8b8b8b;
+                font-size: 14px;
+              }
             }
           }
         }

pages/applyPurchase/index.vue

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