跳转项目结构

src/App.vue

@@ -1,61 +1,6 @@
 <template>
   <div id="app">
-    <div style="width: 100%;display: flex;justify-content:space-around;">
-      <el-menu
-        :default-active="activeIndex2"
-        class="el-menu-demo"
-        mode="horizontal"
-        @select="handleSelect">
-        <img src="./assets/logo.png" alt="" style="float: left;width: 15%;margin-top: 10px">
-        <el-menu-item index="1">首页</el-menu-item>
-        <el-submenu index="2">
-          <template slot="title">我要下单</template>
-          <el-menu-item index="2-1">合约下单</el-menu-item>
-          <el-menu-item index="2-2">查询下单</el-menu-item>
-        </el-submenu>
-        <el-submenu index="3">
-          <template slot="title">订单管理</template>
-          <el-menu-item index="3-1">订仓须知</el-menu-item>
-          <el-menu-item index="3-2">我的模板</el-menu-item>
-          <el-menu-item index="3-3">我的订单</el-menu-item>
-          <el-menu-item index="3-4">申请放货</el-menu-item>
-          <el-menu-item index="3-5">拆改单</el-menu-item>
-          <el-menu-item index="3-6">在线换单</el-menu-item>
-        </el-submenu>
-        <el-submenu index="4">
-          <template slot="title">我要结算</template>
-          <el-menu-item index="4-1">结算说明</el-menu-item>
-          <el-menu-item index="4-2">生成账单</el-menu-item>
-          <el-menu-item index="4-3">确认账单</el-menu-item>
-          <el-menu-item index="4-4">申请发票</el-menu-item>
-        </el-submenu>
-        <el-submenu index="5">
-          <template slot="title">货物跟踪</template>
-          <el-menu-item index="5-1">货运跟踪</el-menu-item>
-          <el-menu-item index="5-2">签收单查询</el-menu-item>
-        </el-submenu>
-        <el-submenu index="6">
-          <template slot="title">客服中心</template>
-          <el-menu-item index="6-1">办事处</el-menu-item>
-          <el-menu-item index="6-2">客服 : 2880866298</el-menu-item>
-          <el-menu-item index="6-2">客服 : 2880866300</el-menu-item>
-          <el-menu-item index="6-2">客服 : 2885228653</el-menu-item>
-        </el-submenu>
-        <el-submenu index="7">
-          <template slot="title">用户中心</template>
-          <el-menu-item index="7-1">个人信息</el-menu-item>
-          <el-menu-item index="7-2">消息中心</el-menu-item>
-          <el-menu-item index="7-3">开票信息</el-menu-item>
-          <el-menu-item index="7-4">积分会员</el-menu-item>
-          <el-menu-item index="7-5">账户余额</el-menu-item>
-          <el-menu-item index="7-6">优惠券</el-menu-item>
-          <el-menu-item index="7-7">帐号管理</el-menu-item>
-        </el-submenu>
-        <div style="width: 100px;margin-top: 18px;float: right;color: #909399">
-          登录 | 注册
-        </div>
-      </el-menu>
-    </div>
+    <navigation/>
     <router-view/>
     <div style="width: 100%;height: 100px;background-color: #42b983">
 
@@ -64,26 +9,36 @@
 </template>
 
 <script>
+import navigation from './views/navigation/navigation'
 export default {
   name: 'App',
+  components:{
+    navigation
+  },
   data() {
     return {
-      activeIndex: '1',
-      activeIndex2: '1'
+
     };
   },
   methods: {
     handleSelect(key, keyPath) {
       console.log(key, keyPath);
-      if (key === '2-2'){
-        this.$router.push('/inquiryAndOrder');
+      switch (key){
+        case '1':
+          this.$router.push('/');
+          break
+        case '2-2':
+          this.$router.push('/inquiryAndOrder');
+          break
+        default:
+          break
       }
     },
   }
 };
 </script>
 
-<style>
+<style scoped lang="scss">
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

src/views/inquiryAndOrder/index.vue

@@ -99,8 +99,58 @@
         <el-button type="primary">船期查询</el-button>
       </div>
       <el-divider>查询船期</el-divider>
-      <div style="width: 100%">
-        
+      <div style="width: 100%;padding: 10px;display: flex;justify-content: space-around;border: 1px solid #E8E8E8;box-shadow: 0 2px 7px 0 rgb(71 71 71 / 20%);">
+        <div style="width: 60%;line-height: 40px;">
+          <div style="background-color: #f10724;width: 80px;margin-top: 15px;margin-right: 5px;margin-left: 5px;height: 30px;line-height: 30px;border-radius: 20px;color: #ffffff;float: left">
+            丹东
+          </div>
+          <div style="width: 40px;height: 60px;float: left">
+            <div style="width: 100%;height: 30px;">
+              <img style="width: 50%;" src="./ship.png" alt="">
+            </div>
+            <div style="width: 100%;height: 30px;line-height: 30px;border-top: 1px solid #f33434">
+              驳
+            </div>
+          </div>
+        </div>
+        <div style="width: 20%;margin: 0 auto;display: flex;align-items: center;justify-content: center;border-left: 1px solid #E8E8E8">
+          <div>
+            <span style="color: #999999">全程运输时长：</span>
+            <span style="font-weight:bold">9天</span>
+            <br>
+            <span style="color: #999999">单证有效时间：</span>
+            <span style="font-weight:bold">6天</span>
+          </div>
+        </div>
+        <div style="width: 25%;border-left: 1px solid #E8E8E8;display:flex;justify-content: space-around">
+          <div>
+            <div>20GP</div>
+            <div style="color:#bc1920 ">
+              <span>￥</span>
+              <span style="font-size: 20px;">2590</span>
+              <span>起</span>
+            </div>
+          </div>
+          <div>
+            <div>40HC</div>
+            <div style="color:#bc1920 ">
+              <span>￥</span>
+              <span style="font-size: 20px;">2590</span>
+              <span>起</span>
+            </div>
+          </div>
+          <div>
+            <div>40RH</div>
+            <div>
+              <span>-</span>
+              <span>-</span>
+              <span>-</span>
+            </div>
+          </div>
+        </div>
+        <div style="width: 15%;margin: 0 auto;display: flex;align-items: center;justify-content: center;border-left: 1px solid #E8E8E8">
+          <el-button type="primary">查看船期</el-button>
+        </div>
       </div>
     </div>
   </div>
@@ -126,6 +176,7 @@ export default {
   },
   methods: {
     handleSelect(key, keyPath) {
+      this.whether = false
       console.log(key, keyPath);
       this.selection = key;
     }
@@ -141,7 +192,6 @@ export default {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  border: 1px solid #ececec;
 }
 
 .outermost > div:nth-child(1) {

src/views/navigation/navigation.vue

@@ -0,0 +1,88 @@
+<template>
+  <div style="width: 100%;display: flex;justify-content:space-around;">
+    <el-menu
+      :default-active="activeIndex"
+      class="el-menu-demo"
+      mode="horizontal"
+      @select="handleSelect">
+      <img src="../../assets/logo.png" alt="" style="float: left;width: 15%;margin-top: 10px">
+      <el-menu-item index="1">首页</el-menu-item>
+      <el-submenu index="2">
+        <template slot="title">我要下单</template>
+        <el-menu-item index="2-1">合约下单</el-menu-item>
+        <el-menu-item index="2-2">查询下单</el-menu-item>
+      </el-submenu>
+      <el-submenu index="3">
+        <template slot="title">订单管理</template>
+        <el-menu-item index="3-1">订仓须知</el-menu-item>
+        <el-menu-item index="3-2">我的模板</el-menu-item>
+        <el-menu-item index="3-3">我的订单</el-menu-item>
+        <el-menu-item index="3-4">申请放货</el-menu-item>
+        <el-menu-item index="3-5">拆改单</el-menu-item>
+        <el-menu-item index="3-6">在线换单</el-menu-item>
+      </el-submenu>
+      <el-submenu index="4">
+        <template slot="title">我要结算</template>
+        <el-menu-item index="4-1">结算说明</el-menu-item>
+        <el-menu-item index="4-2">生成账单</el-menu-item>
+        <el-menu-item index="4-3">确认账单</el-menu-item>
+        <el-menu-item index="4-4">申请发票</el-menu-item>
+      </el-submenu>
+      <el-submenu index="5">
+        <template slot="title">货物跟踪</template>
+        <el-menu-item index="5-1">货运跟踪</el-menu-item>
+        <el-menu-item index="5-2">签收单查询</el-menu-item>
+      </el-submenu>
+      <el-submenu index="6">
+        <template slot="title">客服中心</template>
+        <el-menu-item index="6-1">办事处</el-menu-item>
+        <el-menu-item index="6-2">客服 : 2880866298</el-menu-item>
+        <el-menu-item index="6-2">客服 : 2880866300</el-menu-item>
+        <el-menu-item index="6-2">客服 : 2885228653</el-menu-item>
+      </el-submenu>
+      <el-submenu index="7">
+        <template slot="title">用户中心</template>
+        <el-menu-item index="7-1">个人信息</el-menu-item>
+        <el-menu-item index="7-2">消息中心</el-menu-item>
+        <el-menu-item index="7-3">开票信息</el-menu-item>
+        <el-menu-item index="7-4">积分会员</el-menu-item>
+        <el-menu-item index="7-5">账户余额</el-menu-item>
+        <el-menu-item index="7-6">优惠券</el-menu-item>
+        <el-menu-item index="7-7">帐号管理</el-menu-item>
+      </el-submenu>
+      <div style="width: 100px;margin-top: 18px;float: right;color: #909399">
+        登录 | 注册
+      </div>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'navigation',
+  data() {
+    return {
+      activeIndex: '',
+    };
+  },
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+      switch (key){
+        case '1':
+          this.$router.push('/');
+          break
+        case '2-2':
+          this.$router.push('/inquiryAndOrder');
+          break
+        default:
+          break
+      }
+    },
+  }
+};
+</script>
+
+<style scoped>
+
+</style>