新增合约下单

src/css/global.scss

@@ -0,0 +1,8 @@
+.el-input__inner{
+  border:none;
+  border-bottom:1px solid #ccc;
+  border-radius: 0px;
+}
+.el-form-item__label{
+  color:#A1A6AC;
+}

src/router/index.js

@@ -41,6 +41,13 @@ export default new Router({
       meta: {
         keepAlive: false
       }
+    },{
+      path: '/contractPlacing/index',
+      name: 'contractPlacing',
+      component: () => import(/* webpackChunkName: "about" */ '../views/contractPlacing/index'),
+      meta: {
+        keepAlive: true
+      }
     }
   ],
 });

src/views/contractPlacing/index.vue

@@ -0,0 +1,305 @@
+<template>
+  <div id="container" style="margin-bottom: 100px;display: flex;justify-content: center;">
+    <div style="width:80%;">
+<!--      基本资料-->
+      <div style="background: #FFFFFF;box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);width:75%">
+        <div style="padding-left:30px;width:100%;text-align:left;padding:10px;font-size: 20px">
+          <span style="display: inline-block;background-color: red;width:5px;margin-right: 10px">&nbsp;</span>
+          <span>基础资料</span>
+        </div>
+        <div style="display:flex;justify-content:space-around;flex-wrap: wrap;margin: 10px 20px">
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">起运港口</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;;color:#A3A7AD">目的港口</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">预计装货时间</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">运输条款</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">付款方式</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">受票方</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">箱内签收单</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">订舱人扣货</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div style="width: 72%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">备注</span>
+            <div style="margin-left:20px;padding-top: 4px;">
+              <el-input style="width:80%;" v-model="form.port" placeholder="如有特殊需求，请再此说明"/>
+              <el-button type="text" style="display: inline; color: red">附件上传<i class="el-icon-upload el-icon--right"></i></el-button>
+            </div>
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;"></div>
+        </div>
+      </div>
+<!--      预计时间-->
+      <div style="background: #FFFFFF;box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);width:75%">
+        <div style="padding-left:30px;width:100%;text-align:left;padding:10px;font-size: 20px">
+          <span style="display: inline-block;background-color: red;width:5px;margin-right: 10px">&nbsp;</span>
+          <span>预计时间</span>
+        </div>
+<!--        步骤条-->
+        <div style="margin:10px;padding:20px 0 40px 0;display: flex;flex-direction: column;align-items: center">
+          <div style="width: 35%;display: flex;justify-content: space-between">
+            <img src="@/assets/ship.png" alt="" style="width:20px">
+            <img src="@/assets/ship.png" alt="" style="width:20px">
+          </div>
+          <div style="width: 80%;display: flex;align-items: center;">
+            <div style="background-color: red;width: 8px;height: 8px;border-radius: 50%;display: inline-block"></div>
+            <div style="width: 50%;height: 2px;background-color: red;display: inline-block;"></div>
+            <div style="background-color: red;width: 8px;height: 8px;border-radius: 50%;display: inline-block"></div>
+            <div style="width: 50%;height: 2px;background-color: red;display: inline-block;"></div>
+            <div style="background-color: red;width: 8px;height: 8px;border-radius: 50%;display: inline-block"></div>
+          </div>
+<!--          文本地点-->
+          <div style="display: flex;justify-content: space-between;width:90%;">
+            <div>
+              <p>天津</p>
+              <div style="color:#848484;display: flex;flex-direction: column;align-items: center">
+                <p style="width:70px;margin: 0">预计开航</p>
+                <p style="margin: 0">2022-03-24</p>
+              </div>
+            </div>
+            <div>
+              <p>南沙</p>
+              <div style="color:#848484;display: flex;flex-direction: column;align-items: center">
+                <p style="width:70px;margin: 0">预计抵港</p>
+                <p style="margin: 0">2022-03-24</p>
+                <p style="width:70px;margin: 0">预计开航</p>
+                <p style="margin: 0">2022-03-24</p>
+              </div>
+            </div>
+            <div>
+              <p>乐平</p>
+              <div style="color: #848484;display: flex;flex-direction: column;align-items: center">
+                <p style="width:70px;margin: 0">预计抵港</p>
+                <p style="margin: 0">2022-03-24</p>
+              </div>
+            </div>
+          </div>
+        </div>
+<!--        <el-steps   align-center style="margin:20px 10px 10px 10px" color="red">-->
+<!--          <el-step title="步骤1" description="这是一段很长很长很长的描述性文字" ></el-step>-->
+<!--          <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>-->
+<!--          <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>-->
+<!--        </el-steps>-->
+      </div>
+<!--      收发货人信息-->
+      <div style="background: #FFFFFF;box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);width:75%;display: flex;justify-content: space-between">
+        <!--      收货信息-->
+        <div style="padding-left:30px;width:50%;text-align:left;padding:10px;font-size: 20px;margin-right: 4px;background: #FFFFFF;box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);">
+          <div>
+            <span style="display: inline-block;background-color: red;width:6px;margin-right: 10px">&nbsp;</span>
+            <span>发货信息</span>
+        </div>
+          <div style="margin: 30px 0 0 10px">
+            <div style="width: 100%;height: 100px;text-align: left;">
+              <span style="margin-left:20px;color:#A3A7AD;font-size:16px">发货人全称</span>
+              <el-input style="width:90%;margin-left:20px;top: 4px"/>
+            </div>
+            <div style="width: 100%;height: 100px;text-align: left;">
+              <span style="margin-left:20px;color:#A3A7AD;font-size:16px">发货人联系人</span>
+              <el-input style="width:90%;margin-left:20px;top: 4px"/>
+            </div>
+            <div style="width: 100%;height: 100px;text-align: left;">
+              <span style="margin-left:20px;color:#A3A7AD;font-size:16px">发货人电话</span>
+              <el-input style="width:90%;margin-left:20px;top: 4px"/>
+            </div>
+
+          </div>
+        </div>
+        <!--      发货信息-->
+        <div style="padding-left:30px;width:50%;text-align:left;padding:10px;font-size: 20px;background: #FFFFFF;box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);">
+          <div>
+          <span style="display: inline-block;background-color: red;width:6px;margin-right: 10px">&nbsp;</span>
+          <span>收货信息</span>
+          </div>
+          <div style="margin: 30px 0 0 10px">
+            <div style="width: 100%;height: 100px;text-align: left;">
+              <span style="margin-left:20px;color:#A3A7AD;font-size:16px">收货人全称</span>
+              <el-input style="width:90%;margin-left:20px;top: 4px"/>
+            </div>
+            <div style="width: 100%;height: 100px;text-align: left;">
+              <span style="margin-left:20px;color:#A3A7AD;font-size:16px">收货人联系人</span>
+              <el-input style="width:90%;margin-left:20px;top: 4px"/>
+            </div>
+            <div style="width: 100%;height: 100px;text-align: left;">
+              <span style="margin-left:20px;color:#A3A7AD;font-size:16px">收货人电话</span>
+              <el-input style="width:90%;margin-left:20px;top: 4px"/>
+            </div>
+
+          </div>
+        </div>
+        </div>
+<!--      货物信息-->
+      <!--      基本资料-->
+      <div style="background: #FFFFFF;box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);width:75%">
+        <div style="padding-left:30px;width:100%;text-align:left;padding:10px;font-size: 20px">
+          <span style="display: inline-block;background-color: red;width:5px;margin-right: 10px">&nbsp;</span>
+          <span>货物信息</span>
+        </div>
+        <div style="display:flex;justify-content:space-around;flex-wrap: wrap;margin: 10px 20px">
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">货物名称</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;;color:#A3A7AD">货类</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">包装类型</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">箱型</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">箱量</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">单箱重量（吨）</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">箱态</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">自备货柜</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">危险化学品</span>
+            <el-input style="width:70%;margin-left:20px;top: 4px" />
+            <el-button type="text" style="display: inline; color: red"><i class="el-icon-upload el-icon--right"></i></el-button>
+          </div>
+          <div style="width: 72%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD"></span>
+            <div style="margin-left:20px;padding-top: 4px;">
+              <el-input style="width:80%;" v-model="form.port" placeholder="如有特殊需求，请再此说明"/>
+            </div>
+          </div>
+
+        </div>
+      </div>
+<!--      费用信息-->
+      <div style="background: #FFFFFF;box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);width:75%">
+        <div style="padding-left:30px;width:100%;text-align:left;padding:10px;font-size: 20px">
+          <span style="display: inline-block;background-color: red;width:5px;margin-right: 10px">&nbsp;</span>
+          <span>费用信息</span>
+        </div>
+        <div style="display:flex;justify-content: left;flex-wrap: wrap;margin: 10px 20px">
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;color:#A3A7AD">是否办理保险</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+          </div>
+          <div style="width: 24%;height: 100px;text-align: left;">
+            <span style="margin-left:20px;;color:#A3A7AD">保险货值（万元）</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+
+        </div>
+      </div>
+      </div>
+
+<!--    右基本资料-->
+    <div style="width:25%;position: fixed;right:70px">
+      <div style="background: #FFFFFF;box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);">
+        <div style="padding-left:30px;width:100%;text-align:left;padding:10px;font-size: 20px">
+          <span style="display: inline-block;background-color: red;width:5px;margin-right: 10px">&nbsp;</span>
+          <span>基础资料</span>
+        </div>
+        <div style="padding:10px;margin: 0 20px 0 20px;border-bottom:1px dashed #E8E8E8;color: #71757A">
+          <p style="display: flex;justify-content: space-between">
+            <span>箱型</span>
+            <span style="color: #000">1111</span>
+          </p>
+          <p style="display: flex;justify-content: space-between">
+            <span>箱量</span>
+            <span style="color: #000">1111</span>
+          </p>
+        </div>
+        <div style="padding:10px;margin: 0 20px 0 20px;border-bottom:1px solid #E8E8E8;color: #71757A">
+          <p style="display: flex;justify-content: space-between">
+            <span>海运服务费</span>
+            <span style="color: #000">1111</span>
+          </p>
+          <p style="display: flex;justify-content: space-between">
+            <span>代理进口杂费合计</span>
+            <span style="color: #000">1111</span>
+          </p>
+          <p style="display: flex;justify-content: space-between">
+            <span>代理出口杂费合计</span>
+            <span style="color: #000">1111</span>
+          </p>
+          <p style="display: flex;justify-content: space-between">
+            <span>THC代收</span>
+            <span style="color: #000">1111</span>
+          </p>
+          <p style="display: flex;justify-content: space-between">
+            <span>燃油附加费</span>
+            <span style="color: #000">1111</span>
+          </p>
+        </div>
+        <div style="padding:10px;margin: 0 20px 0 20px;color: #71757A">
+          <p style="display: flex;justify-content: space-between">
+            <span>保险费</span>
+            <span style="color: #000">1111</span>
+          </p>
+        </div>
+      </div>
+      <div style="background: red;height: 70px;margin-top: 20px;text-align: center;line-height: 60px;color:white;font-size: 20px">
+        确认下单
+      </div>
+    </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import "@/css/global.scss"
+export default {
+  name: 'contractPlacing',
+  data() {
+    return {
+      form:{
+        port:null,
+      },
+    };
+  },
+  created() {
+
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.el-input .el-button {
+
+}
+</style>

src/views/navigation/navigation.vue

@@ -9,7 +9,7 @@
       <el-menu-item index="/">首页</el-menu-item>
       <el-submenu index="2">
         <template slot="title">我要下单</template>
-        <el-menu-item index="2-1">合约下单</el-menu-item>
+        <el-menu-item index="/contractPlacing/index">合约下单</el-menu-item>
         <el-menu-item index="/inquiryAndOrder">查询下单</el-menu-item>
       </el-submenu>
       <el-submenu index="3">