发布求购模块

components/applyPurchase/PublishApply.vue

@@ -28,8 +28,61 @@
       </ul>
     </div>
     <div class="publish-area">
-      <div class="publish-form">
+      <div class="publish-form-area">
         <p>单个发布</p>
+        <div>
+          <div class="form-item">
+            <span>
+              <i>*</i>型号：
+            </span>
+            <input type="text" class="form-control" />
+          </div>
+          <div class="form-item">
+            <span>
+              <i>*</i>型号：
+            </span>
+            <input type="text" class="form-control" />
+          </div>
+          <div class="form-item">
+            <span>
+              <i>*</i>型号：
+            </span>
+            <input type="text" class="form-control" />
+          </div>
+          <div class="form-item">
+           <span>
+              型号：
+            </span>
+            <input type="text" class="form-control" />
+          </div>
+          <div class="form-item">
+            <span>
+              搜索搜索：
+            </span>
+            <input type="text" class="form-control" />
+          </div>
+          <div class="form-item">
+            <span>
+              <i>*</i>型号：
+            </span>
+            <input type="text" class="form-control" />
+          </div>
+          <div class="form-item">
+            <span>
+              <i>*</i>型号搜索：
+            </span>
+            <input type="text" class="form-control" />
+          </div>
+        </div>
+        <a>发布求购</a>
+      </div>
+      <div class="publish-upload">
+        <h1>批量发布</h1>
+        <h2>3秒一键配单采购</h2>
+        <img src="/images/applyPurchase/upload.png" alt="" />
+        <h3>把Excel格式的BOM拖放到框中</h3>
+        <img class="download-line" src="/images/applyPurchase/download.png" alt="">
+        <img class="apply-logo" src="/images/applyPurchase/publish-apply.png" alt="">
       </div>
     </div>
     <div class="apply-rank">
@@ -84,10 +137,81 @@
     }
     .publish-area {
       width: 549px;
-      .publish-form {
-        width: 245px;
+      .publish-form-area {
+        width: 243px;
+        float: left;
+        height: 100%;
         p {
-          padding-top: 22px;
+          padding-top: 18px;
+          font-size: 26px;
+          color: #3975f4;
+          margin-bottom: 7px;
+        }
+        >div {
+          text-align: left;
+          margin-left: 14px;
+          .form-item {
+            margin-bottom: 5px;
+            span {
+              width: 80px;
+              text-align: right;
+              display: inline-block;
+              i {
+                position: relative;
+                top: 2px;
+                right: 3px;
+                color: #e41515;
+              }
+            }
+            input {
+              width: 111px;
+              height: 20px;
+              line-height: 20px;
+              border-radius: 2px;
+            }
+          }
+        }
+        >a {
+          width: 90px;
+          height: 25px;
+          line-height: 25px;
+          background: #3975f4;
+          color: #fefefe;
+          font-size: 16px;
+          display: block;
+          margin: 0 auto;
+          border-radius: 3px;
+          cursor: pointer;
+        }
+      }
+      .publish-upload {
+        background: url('/images/applyPurchase/publish-apply-bg.png')no-repeat;
+        background-size: cover;
+        width: 304px;
+        height: 100%;
+        padding-left: 22px;
+        float: right;
+        color: #fff;
+        position: relative;
+        h1 {
+          font-size: 26px;
+          margin: 22px 0 0 0;
+        }
+        h2 {
+          font-size: 16px;
+          margin: 10px 0 23px 0;
+        }
+        h3 {
+          font-size: 16px;
+          margin: 20px 0 13px 0;
+        }
+        .download-line {
+          cursor: pointer;
+        }
+        .apply-logo {
+          position: absolute;
+          left: -20px;
+          top: 86px;
         }
       }
     }