求购频道页梯度报价

assets/scss/commonComponent.css

@@ -21,6 +21,7 @@
     background-color: white;
     width: 310px;
     -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
+    -moz-box-shadow: 0 5px 15px rgba(0,0,0,.5);
     box-shadow: 0 5px 15px rgba(0,0,0,.5);
     margin: -155px 0 0 -75px;
     top: 55%;

components/applyPurchase/ApplyInfo.vue

@@ -86,6 +86,66 @@
         </li>
       </ul>
     </div>
+    <div class="say-price-box">
+      <div class="title">
+        <div>型号：<span>PMDIDASJD</span></div>
+        <div>品牌：<span>台积电</span></div>
+        <i class="fa fa-close"></i>
+      </div>
+      <div class="content">
+        <div class="content-line">
+          <div class="form-item form-left">
+            <span><i>*</i>交期：</span>
+            <input type="text" class="form-control" placeholder="天数">
+            -
+            <input type="text" class="form-control" placeholder="天数">
+          </div>
+          <div class="form-item form-upload">
+            <label>
+              <span><i>+</i>添加附件</span>
+              <input type="file">
+            </label>
+            <!--<div>
+              <span>我是Excel的名字111</span>
+              <i class="fa fa-times-circle"></i>
+              <a href="">更换</a>
+            </div>-->
+          </div>
+        </div>
+        <div class="content-line">
+          <div class="form-item form-left">
+            <span><i>*</i>价格梯度：</span>
+            <input type="text" class="form-control" placeholder="数量">
+            -
+            <input type="text" class="form-control" placeholder="数量">
+          </div>
+          <div class="form-item form-right">
+            <span><i>*</i>单价($)：</span>
+            <input type="text" class="form-control" placeholder="单价">
+            <i class="fa fa-minus-circle"></i>
+            <i class="fa fa-plus-circle"></i>
+          </div>
+        </div>
+        <div class="content-line">
+          <div class="form-item form-left">
+            <span><i>*</i>价格梯度：</span>
+            <input type="text" class="form-control" placeholder="数量">
+            -
+            <input type="text" class="form-control" placeholder="数量">
+          </div>
+          <div class="form-item form-right">
+            <span><i>*</i>单价($)：</span>
+            <input type="text" class="form-control" placeholder="单价">
+            <i class="fa fa-minus-circle"></i>
+            <i class="fa fa-plus-circle"></i>
+          </div>
+        </div>
+      </div>
+      <div class="operate">
+        <span>确定</span>
+        <span>取消</span>
+      </div>
+    </div>
     <page :total="totalCount" :page-size="pageSize"
           :current="nowPage" v-on:childEvent="listenPage"></page>
     <loading v-if="showLoading"></loading>
@@ -676,5 +736,141 @@
       text-align: right;
       float: none;
     }
+    .say-price-box {
+      position: fixed;
+      width: 527px;
+      top: 30%;
+      left: 33%;
+      border-radius: 5px;
+      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
+      -moz-box-shadow: 0 5px 15px rgba(0,0,0,.5);
+      box-shadow: 0 5px 15px rgba(0,0,0,.5);
+      z-index: 1;
+      .title {
+        position: relative;
+        height: 44px;
+        background: #4290f7;
+        line-height: 44px;
+        color: #fff;
+        > div {
+          display: inline-block;
+          padding-left: 66px;
+          width: 49%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        i {
+          position: absolute;
+          right: 10px;
+          top: 8px;
+          cursor: pointer;
+        }
+      }
+      .content {
+        padding: 9px 0;
+        background: #fff;
+        .content-line {
+          margin: 0 0 14px 0;
+          .form-item {
+            display: inline-block;
+            width: 49%;
+            > span {
+              i {
+                color: #fd2637;
+                margin-right: 4px;
+              }
+            }
+            input {
+              border: 1px solid #bfbfbf;
+              border-radius: 2px;
+              height: 28px;
+            }
+            &.form-left {
+              span {
+                display: inline-block;
+                width: 104px;
+                text-align: right;
+              }
+              input {
+                width: 64px;
+              }
+            }
+            &.form-upload {
+              text-align: center;
+              label {
+                margin-bottom: 0;
+                cursor: pointer;
+                input {
+                  display: none;
+                }
+                span {
+                  display: block;
+                  width: 94px;
+                  height: 23px;
+                  line-height: 18px;
+                  font-weight: normal;
+                  color: #4290f7;
+                  text-align: center;
+                  border: 1px dashed #4290f7;
+                  border-radius: 11px;
+                  i {
+                    font-weight: bold;
+                    font-style: normal;
+                    font-size: 18px;
+                    margin-right: 5px;
+                  }
+                }
+              }
+              div {
+                i {
+                  cursor: pointer;
+                  color: #eb222c;
+                  font-size: 16px;
+                  margin-right: 10px;
+                }
+                span {
+                  display: inline-block;
+                  max-width: 128px;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+              }
+            }
+            &.form-right {
+              padding-left: 13px;
+              input {
+                width: 101px;
+              }
+              > i {
+                margin-left: 4px;
+              }
+            }
+          }
+        }
+      }
+      .operate {
+        border-top: 1px solid #e4e5e6;
+        background: #fff;
+        height: 62px;
+        text-align: center;
+        padding-top: 15px;
+        span {
+          display: inline-block;
+          width: 64px;
+          height: 28px;
+          line-height: 28px;
+          text-align: center;
+          background: #4290f7;
+          color: #fff;
+          cursor: pointer;
+          &:last-child {
+            margin-left: 15px;
+            background: #acabab;
+          }
+        }
+      }
+    }
   }
 </style>

components/main/Nav.vue

@@ -26,7 +26,7 @@
         <span>优软快讯</span>
       </nuxt-link>
       <nuxt-link to="/applyPurchase" class="item">
-        <span>求购</span>
+        <span>求购询价</span>
       </nuxt-link>
     </div>
   </nav>