BOM确认页

components/applyPurchase/BatchPublish.vue

@@ -1,6 +1,159 @@
 <template>
-  <div>222</div>
+  <div class="batch-publish">
+    <p>成功上传<b class="red-text">100</b>个<br/>另有<span class="red-text">100</span>个必填项缺失，请在当前页完善信息</p>
+    <table>
+      <thead>
+        <tr>
+          <th><input type="checkbox">全选</th>
+          <th><i class="red-text">*</i>型号</th>
+          <th><i class="red-text">*</i>品牌</th>
+          <th>采购数量</th>
+          <th>单价预算</th>
+          <th>封装</th>
+          <th>生产日期</th>
+          <th><i class="red-text">*</i>截止时间</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+        <td><input type="checkbox"></td>
+        <td>asdasd</td>
+        <td>asdasda</td>
+        <td>123</td>
+        <td class="blue-text">$123</td>
+        <td>asd</td>
+        <td>2016+</td>
+        <td>2012-12-12</td>
+        <td class="operate">
+          <a class="modify-btn">修改</a>
+          <a class="delete-btn">删除</a>
+          <!--<a class="submit-btn">确认</a>
+          <a class="cancel-btn">取消</a>-->
+        </td>
+      </tr>
+        <tr>
+          <td><input type="checkbox"></td>
+          <td>asdasd</td>
+          <td>asdasda</td>
+          <td>123</td>
+          <td class="blue-text">$123</td>
+          <td>asd</td>
+          <td>2016+</td>
+          <td>2012-12-12</td>
+          <td class="operate">
+            <a class="modify-btn">修改</a>
+            <a class="delete-btn">删除</a>
+            <!--<a class="submit-btn">确认</a>
+            <a class="cancel-btn">取消</a>-->
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div>
+      <a class="delete-btn">删除</a>
+      <a class="modify-btn">确认发布</a>
+    </div>
+  </div>
 </template>
 <style lang="scss" scoped>
-
+  .batch-publish {
+    margin: 0 auto;
+    width: 998px;
+    .red-text {
+      color: #ff0000;
+    }
+    p {
+      margin: 59px 0 42px;
+      font-size: 16px;
+    }
+    table {
+      width: 100%;
+      thead {
+        tr {
+          th {
+            background: #b8b8b8;
+            color: #fff;
+            font-weight: normal;
+            height: 50px;
+            line-height: 50px;
+            text-align: center;
+            input[type="checkbox"] {
+              position: relative;
+              top: 2px;
+            }
+            i {
+              margin-right: 3px;
+            }
+          }
+        }
+      }
+      tbody {
+        tr {
+          height: 85px;
+          line-height: 85px;
+          text-align: center;
+          border : {
+            bottom: 1px solid #d9d9d9;
+            left: 1px solid #d9d9d9;
+            right: 1px solid #d9d9d9;
+          }
+          &:hover {
+            background: #f3f3f3;
+          }
+          td {
+            .blue-text {
+              color: #3c7cf5;
+            }
+            &.operate {
+              a {
+                display: block;
+                width: 64px;
+                height: 24px;
+                line-height: 22px;
+                text-align: center;
+                border-radius: 3px;
+                margin: 0 auto 4px;
+                &.submit-btn {
+                  border: 1px solid #f64900;
+                  color: #fff;
+                  background: #f64900;
+                }
+                &.cancel-btn {
+                  border: 1px solid #dddddd;
+                  color: #fff;
+                  background: #dddddd;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .modify-btn {
+      border: 1px solid #3c7cf5;
+      color: #3c7cf5;
+    }
+    .delete-btn {
+      border: 1px solid #3c7cf5;
+      color: #fff;
+      background: #3c7cf5;
+    }
+    > div {
+      margin: 51px auto 60px;
+      text-align: center;
+      a {
+        display: inline-block;
+        width: 64px;
+        height: 24px;
+        line-height: 22px;
+        text-align: center;
+        border-radius: 3px;
+        &.modify-btn {
+          width: 90px;
+          margin-left: 14px;
+        }
+      }
+    }
+  }
 </style>

pages/applyPurchase/_id.vue

@@ -1,9 +1,13 @@
 <template>
   <div>
-    111
+    <batch-publish></batch-publish>
   </div>
 </template>
 <script>
+  import { BatchPublish } from '~components/applyPurchase'
   export default {
+    components: {
+      BatchPublish
+    }
   }
 </script>