Merge branch 'master' of git.echepei.com:caojunjie/kaihegroup-Ui

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/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

@@ -11,35 +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,
+        footer:false
       }
     }
   ],

src/views/contractPlacing/index.vue

@@ -0,0 +1,429 @@
+<template>
+  <div id="container" style="margin-bottom: 100px;display: flex;justify-content: center;">
+    <div style="width:80%;">
+<!--      基本资料-->
+      <div class="moduleStyle">
+        <div class="titleBox">
+          <span class="redBlock">&nbsp;</span>
+          <span>基础资料</span>
+        </div>
+        <div class="basicData">
+          <div class="mainModules">
+            <span>起运港口</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+          </div>
+          <div class="mainModules">
+            <span>目的港口</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div class="mainModules">
+            <span >预计装货时间</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div class="mainModules">
+            <span>运输条款</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div class="mainModules">
+            <span>付款方式</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div class="mainModules">
+            <span>受票方</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div class="mainModules">
+            <span>箱内签收单</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div class="mainModules">
+            <span>订舱人扣货</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <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 class="mainModules"></div>
+        </div>
+      </div>
+<!--      预计时间-->
+      <div class="moduleStyle">
+        <div class="titleBox">
+          <span class="redBlock">&nbsp;</span>
+          <span>预计时间</span>
+        </div>
+<!--        步骤条-->
+        <div class="stepBarIcon">
+          <div class="iconShip">
+            <img src="@/assets/ship.png" alt="">
+            <img src="@/assets/ship.png" alt="">
+          </div>
+          <div class="stepBarLine">
+            <div v-for="item in 5"></div>
+          </div>
+<!--          文本地点-->
+          <div class="stepBarText">
+            <div>
+              <p>天津</p>
+              <div>
+                <p>预计开航</p>
+                <p>2022-03-24</p>
+              </div>
+            </div>
+            <div>
+              <p>南沙</p>
+              <div>
+                <p>预计抵港</p>
+                <p>2022-03-24</p>
+                <p>预计开航</p>
+                <p>2022-03-24</p>
+              </div>
+            </div>
+            <div>
+              <p>乐平</p>
+              <div>
+                <p>预计抵港</p>
+                <p>2022-03-24</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+<!--      收发货人信息-->
+      <div class="feeBox" style="">
+        <!--      发货信息-->
+        <div class="titleBox_receive" style="margin-right: 4px;">
+          <div>
+            <span class="redBlock">&nbsp;</span>
+            <span>发货信息</span>
+        </div>
+          <div class="receiveInfo">
+            <div class="infoBox">
+              <span>发货人全称</span>
+              <el-input/>
+            </div>
+            <div class="infoBox">
+              <span>发货人联系人</span>
+              <el-input/>
+            </div>
+            <div class="infoBox">
+              <span>发货人电话</span>
+              <el-input/>
+            </div>
+
+          </div>
+        </div>
+        <!--      收货信息-->
+        <div class="titleBox_receive" style="padding-right: 10px">
+          <div>
+          <span class="redBlock">&nbsp;</span>
+          <span>收货信息</span>
+          </div>
+          <div class="receiveInfo">
+            <div class="infoBox" >
+              <span>收货人全称</span>
+              <el-input/>
+            </div>
+            <div class="infoBox" >
+              <span>收货人联系人</span>
+              <el-input/>
+            </div>
+            <div class="infoBox" >
+              <span>收货人电话</span>
+              <el-input/>
+            </div>
+
+          </div>
+        </div>
+        </div>
+<!--      货物信息-->
+      <!--      基本资料-->
+      <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 class="mainModules" >
+            <span >货物名称</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+          </div>
+          <div class="mainModules" >
+            <span >货类</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div class="mainModules" >
+            <span >包装类型</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div class="mainModules" >
+            <span >箱型</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div class="mainModules" >
+            <span >箱量</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div class="mainModules" >
+            <span >单箱重量（吨）</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div class="mainModules" >
+            <span>箱态</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <div class="mainModules" >
+            <span>自备货柜</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          </div>
+          <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>
+          <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 class="moduleStyle">
+        <div class="titleBox">
+          <span class="redBlock">&nbsp;</span>
+          <span>费用信息</span>
+        </div>
+        <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 class="mainModules">
+            <span >保险货值（万元）</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+          </div>
+        </div>
+      </div>
+      </div>
+
+<!--    右基本资料-->
+    <div class="costCalculation">
+      <div class="costModuleStyle" style="">
+        <div class="titleBox">
+          <span class="redBlock">&nbsp;</span>
+          <span>基础资料</span>
+        </div>
+        <div class="mainBox">
+          <p>
+            <span>箱型</span>
+            <span >1111</span>
+          </p>
+          <p>
+            <span>箱量</span>
+            <span>1111</span>
+          </p>
+        </div>
+        <div class="mainBox" style="border-bottom: 1px solid #E8E8E8">
+          <p>
+            <span>海运服务费</span>
+            <span>1111</span>
+          </p>
+          <p>
+            <span>代理进口杂费合计</span>
+            <span>1111</span>
+          </p>
+          <p>
+            <span>代理出口杂费合计</span>
+            <span>1111</span>
+          </p>
+          <p>
+            <span>THC代收</span>
+            <span>1111</span>
+          </p>
+          <p>
+            <span>燃油附加费</span>
+            <span>1111</span>
+          </p>
+        </div>
+        <div class="mainBox" style="border-bottom: none">
+          <p>
+            <span>保险费</span>
+            <span>1111</span>
+          </p>
+        </div>
+      </div>
+      <div class="confirmOrder" style="">
+        确认下单
+      </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">
+.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>

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">