新增合约下单样式规整

src/App.vue

@@ -2,7 +2,8 @@
   <div id="app">
     <navigation v-if="$route.meta.keepAlive" style="z-index: 10000"/>
     <router-view style="padding-top: 62px;"/>
-    <el_footer v-if="$route.meta.keepAlive"/>
+<!--    <el_footer v-if="$route.meta.keepAlive||$route.meta.footer"/>-->
+    <el_footer v-if="$route.meta.footer === false?$route.meta.footer:$route.meta.keepAlive"/>
    </div>
 </template>
 
@@ -23,6 +24,7 @@ export default {
     };
   },
   created(){
+    console.log(this.$route.meta.keepAlive)
     // console.log(Cookies.get('TokenKey'));
     // if (Cookies.get('TokenKey')){
     //   this.$router.push({ path: this.redirect || '/' });

src/router/index.js

@@ -11,42 +11,48 @@ export default new Router({
       name: 'home',
       component: () => import(/* webpackChunkName: "about" */ '../views/home/index'),
       meta: {
-        keepAlive: true
+        keepAlive: true,
+        footer:true
       }
     },{
       path: '/contractPlacing',
       name: 'contractPlacing',
       component: () => import(/* webpackChunkName: "about" */ '../views/placingOrder/contractPlacing'),
       meta: {
-        keepAlive: true
+        keepAlive: true,
+        footer:true
       }
     },{
       path: '/inquiryAndOrder',
       name: 'inquiryAndOrder',
       component: () => import(/* webpackChunkName: "about" */ '../views/inquiryAndOrder/index'),
       meta: {
-        keepAlive: true
+        keepAlive: true,
+        footer:true
       }
     },{
       path: '/myorder',
       name: 'myorder',
       component: () => import(/* webpackChunkName: "about" */ '../views/management/myorder'),
       meta: {
-        keepAlive: true
+        keepAlive: true,
+        footer:true
       }
     },{
       path: '/login',
       name: 'login',
       component: () => import(/* webpackChunkName: "about" */ '../views/login/index'),
       meta: {
-        keepAlive: false
+        keepAlive: false,
+        footer:true
       }
     },{
       path: '/contractPlacing/index',
       name: 'contractPlacing',
       component: () => import(/* webpackChunkName: "about" */ '../views/contractPlacing/index'),
       meta: {
-        keepAlive: true
+        keepAlive: true,
+        footer:false
       }
     }
   ],

src/views/contractPlacing/index.vue

@@ -2,148 +2,139 @@
   <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>
+      <div class="moduleStyle">
+        <div class="titleBox">
+          <span class="redBlock">&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>
+        <div class="basicData">
+          <div class="mainModules">
+            <span>起运港口</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>
+          <div class="mainModules">
+            <span>目的港口</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>
+          <div class="mainModules">
+            <span >预计装货时间</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>
+          <div class="mainModules">
+            <span>运输条款</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>
+          <div class="mainModules">
+            <span>付款方式</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>
+          <div class="mainModules">
+            <span>受票方</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>
+          <div class="mainModules">
+            <span>箱内签收单</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>
+          <div class="mainModules">
+            <span>订舱人扣货</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 class="remarkBox">
+            <span>备注</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 class="mainModules"></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>
+      <div class="moduleStyle">
+        <div class="titleBox">
+          <span class="redBlock">&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 class="stepBarIcon">
+          <div class="iconShip">
+            <img src="@/assets/ship.png" alt="">
+            <img src="@/assets/ship.png" alt="">
           </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 class="stepBarLine">
+            <div v-for="item in 5"></div>
           </div>
 <!--          文本地点-->
-          <div style="display: flex;justify-content: space-between;width:90%;">
+          <div class="stepBarText">
             <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>
+                <p>预计开航</p>
+                <p>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>
+                <p>预计抵港</p>
+                <p>2022-03-24</p>
+                <p>预计开航</p>
+                <p>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>
+                <p>预计抵港</p>
+                <p>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 class="feeBox" style="">
+        <!--      发货信息-->
+        <div class="titleBox_receive" style="margin-right: 4px;">
           <div>
-            <span style="display: inline-block;background-color: red;width:6px;margin-right: 10px">&nbsp;</span>
+            <span class="redBlock">&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 class="receiveInfo">
+            <div class="infoBox">
+              <span>发货人全称</span>
+              <el-input/>
             </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 class="infoBox">
+              <span>发货人联系人</span>
+              <el-input/>
             </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 class="infoBox">
+              <span>发货人电话</span>
+              <el-input/>
             </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 class="titleBox_receive" style="padding-right: 10px">
           <div>
-          <span style="display: inline-block;background-color: red;width:6px;margin-right: 10px">&nbsp;</span>
+          <span class="redBlock">&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 class="receiveInfo">
+            <div class="infoBox" >
+              <span>收货人全称</span>
+              <el-input/>
             </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 class="infoBox" >
+              <span>收货人联系人</span>
+              <el-input/>
             </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 class="infoBox" >
+              <span>收货人电话</span>
+              <el-input/>
             </div>
 
           </div>
@@ -151,46 +142,46 @@
         </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>
+      <div class="moduleStyle" >
+        <div class="titleBox">
+          <span class="redBlock">&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>
+          <div class="mainModules" >
+            <span >货物名称</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>
+          <div class="mainModules" >
+            <span >货类</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>
+          <div class="mainModules" >
+            <span >包装类型</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>
+          <div class="mainModules" >
+            <span >箱型</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>
+          <div class="mainModules" >
+            <span >箱量</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>
+          <div class="mainModules" >
+            <span >单箱重量（吨）</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>
+          <div class="mainModules" >
+            <span>箱态</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>
+          <div class="mainModules" >
+            <span>自备货柜</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>
+          <div class="mainModules" >
+            <span>危险化学品</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>
@@ -204,75 +195,74 @@
         </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>
+      <div class="moduleStyle">
+        <div class="titleBox">
+          <span class="redBlock">&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>
+        <div class="basicData"  style="display:flex;justify-content: flex-start">
+          <div class="mainModules">
+            <span style="">是否办理保险</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 class="mainModules">
+            <span >保险货值（万元）</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>
+    <div class="costCalculation">
+      <div class="costModuleStyle" style="">
+        <div class="titleBox">
+          <span class="redBlock">&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">
+        <div class="mainBox">
+          <p>
             <span>箱型</span>
-            <span style="color: #000">1111</span>
+            <span >1111</span>
           </p>
-          <p style="display: flex;justify-content: space-between">
+          <p>
             <span>箱量</span>
-            <span style="color: #000">1111</span>
+            <span>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">
+        <div class="mainBox" style="border-bottom: 1px solid #E8E8E8">
+          <p>
             <span>海运服务费</span>
-            <span style="color: #000">1111</span>
+            <span>1111</span>
           </p>
-          <p style="display: flex;justify-content: space-between">
+          <p>
             <span>代理进口杂费合计</span>
-            <span style="color: #000">1111</span>
+            <span>1111</span>
           </p>
-          <p style="display: flex;justify-content: space-between">
+          <p>
             <span>代理出口杂费合计</span>
-            <span style="color: #000">1111</span>
+            <span>1111</span>
           </p>
-          <p style="display: flex;justify-content: space-between">
+          <p>
             <span>THC代收</span>
-            <span style="color: #000">1111</span>
+            <span>1111</span>
           </p>
-          <p style="display: flex;justify-content: space-between">
+          <p>
             <span>燃油附加费</span>
-            <span style="color: #000">1111</span>
+            <span>1111</span>
           </p>
         </div>
-        <div style="padding:10px;margin: 0 20px 0 20px;color: #71757A">
-          <p style="display: flex;justify-content: space-between">
+        <div class="mainBox" style="border-bottom: none">
+          <p>
             <span>保险费</span>
-            <span style="color: #000">1111</span>
+            <span>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 class="confirmOrder" style="">
         确认下单
       </div>
-    </div>
+        </div>
       </div>
     </div>
   </div>
@@ -284,8 +274,8 @@ export default {
   name: 'contractPlacing',
   data() {
     return {
-      form:{
-        port:null,
+      form: {
+        port: null,
       },
     };
   },
@@ -299,7 +289,141 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.el-input .el-button {
+.moduleStyle{
+  background: #FFFFFF;
+  box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.33);
+  width:75%;
+  margin-bottom: 10px;
+}
+.titleBox{
+  padding-left:30px;
+  width:100%;
+  text-align:left;
+  padding:10px;
+  font-size: 20px
+}
+.feeBox{
+  display: flex;
+  justify-content: space-between;
+  width:75%;
+  margin-bottom: 10px;
+}
+.titleBox_receive{
+  padding-left:30px;
+  width:50%;
+  text-align:left;
+  padding:12px;
+  font-size: 20px;
+  background: #FFFFFF;
+  box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);
+}
+.redBlock{
+  display: inline-block;
+  background-color: red;
+  width:5px;
+  margin-right: 10px
+}
+.basicData{
+  display:flex;justify-content:space-around;flex-wrap: wrap;margin: 10px 20px
+}
+.mainModules{
+  width: 24%;
+  height: 100px;
+  text-align: left;
+}
+.remarkBox{
+  width: 72%;height: 100px;text-align: left;
+  span{
+    margin-left:20px;color:#A3A7AD;
+  }
+}
+.mainModules > span{
+  margin-left:20px;
+  color:#A3A7AD;
+}
+.stepBarIcon{
+  margin:10px;
+  padding:20px 0 40px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center
+}
+.iconShip{
+  width: 35%;
+  display: flex;
+  justify-content: space-between
+}
+.iconShip{
+  img{
+    width:20px
+  }
+}
+.stepBarLine{
+  width: 80%;
+  display: flex;
+  align-items: center;
+}
+.stepBarLine{
+  div:nth-child(odd){
+    background-color: red;width: 8px;height: 8px;border-radius: 50%;display: inline-block
+  }
+  div:nth-child(even){
+    width: 50%;height: 2px;background-color: red;display: inline-block;
+  }
+}
+.stepBarText{
+  display: flex;justify-content: space-between;width:90%;
+  div{
+    div{
+      color:#848484;display: flex;flex-direction: column;align-items: center;
+      p:nth-child(odd){
+        width:70px;margin: 0
+      }
+      p:nth-child(even){
+        margin: 0
+      }
+    }
+  }
+}
+.receiveInfo{
+  margin: 30px 0 0 10px;
+  .infoBox{
+    width: 100%;height: 100px;text-align: left;
+    span{
+      margin-left:20px;color:#A3A7AD;font-size:16px
+    }
+    .el-input{
+      width:90%;margin-left:20px;top: 4px
+    }
+  }
+}
 
+.costCalculation{
+  width:25%;position: fixed;right:4%;
+  .costModuleStyle{
+    background: #FFFFFF;box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);
+  }
+  .titleBox{
+    .redBlock{
+      display: inline-block;background-color: red;width:5px;margin-right: 10px
+    }
+  }
+  .mainBox{
+    padding:10px;margin: 0 20px 0 20px;border-bottom:1px dashed #E8E8E8;color: #71757A;
+    p{
+      display: flex;justify-content: space-between;
+      span:nth-child(even){
+        color: #000;
+      }
+    }
+  }
+}
+.confirmOrder{
+  background: red;
+  height: 70px;margin-top: 20px;
+  text-align: center;
+  line-height: 60px;
+  color:white;
+  font-size: 20px;
 }
 </style>