修改

src/views/newBagDetails/components/baggageList.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>行李流程列表</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+</style>

src/views/newBagDetails/components/baggageMessage.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>行李报文</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+</style>

src/views/newBagDetails/components/baggageView.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="baggageView">
+    <el-scrollbar style="height: 100%">
+      <div v-for="item in 10" :key="item" class="baggageView-list">1</div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaggageView'
+}
+</script>
+
+<style lang="scss" scoped>
+.baggageView {
+  height: 100%;
+  &-list {
+    height: 183px;
+    border-bottom: 1px solid #dfe3ea;
+    padding: 30px 32px 47px 32px;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+</style>

src/views/newBagDetails/index.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="newBagDetails">
+    <div class="newBagDetails-info">
+      <div class="newBagDetails-info-look">
+        <el-row :gutter="20">
+          <el-col :span="4">
+            <span class="newBagDetails-info-look-name">XINGMING</span>
+            <el-button type="text">查看</el-button>
+          </el-col>
+          <el-col :span="item.rows" v-for="(item,index) in infoArrs" :key="index">{{ item.label }}：{{ item.value }}</el-col>
+        </el-row>
+      </div>
+      <div class="newBagDetails-info-details">
+        <div class="newBagDetails-info-details-tags">
+          <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+            <div v-for="(item,index) in detailsArr" class="tags-view-item" @click="tagClick(item,index)" :class="activeIndex == index ? 'active' : ''" :key="index">{{ item.no }}</div>
+          </scroll-pane>
+        </div>
+        <div class="newBagDetails-info-details-msgs">
+          <el-row class="newBagDetails-info-details-msgs-l1" :gutter="20">
+            <el-col :span="item.rows" v-for="(item,index) in msgs1" :key="index">{{ item.label }}：{{ item.value }}</el-col>
+          </el-row>
+          <el-row class="newBagDetails-info-details-msgs-l2" :gutter="20">
+            <el-col :span="item.rows" v-for="(item,index) in msgs2" :key="index">{{ item.label }}：{{ item.value }}</el-col>
+          </el-row>
+        </div>
+      </div>
+    </div>
+    <div class="newBagDetails-contents">
+      <div class="newBagDetails-contents-tabs flex-wrap">
+        <div class="newBagDetails-contents-tabs-title">行李跟踪信息</div>
+        <div class="newBagDetails-contents-tabs-btns flex-wrap">
+          <div v-for="(item,index) in tabMenu" @click="tabClick(item,index)" :key="index" :class="index == tabIndex ? 'is-active' : ''" class="newBagDetails-contents-tabs-btns-bt">{{ item.name }}</div>
+        </div>
+      </div>
+      <div class="newBagDetails-contents-page">
+        <component ref="dataChild" :is="componentName"></component>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ScrollPane from "@/layout/components/TagsView/ScrollPane.vue"
+import baggageView from './components/baggageView.vue'
+import baggageList from './components/baggageList.vue'
+import baggageMessage from './components/baggageMessage.vue'
+export default {
+  name: 'NewBagDetails',
+  components: { ScrollPane, baggageView, baggageList, baggageMessage },
+  data () {
+    return {
+      infoArrs: [
+        {
+          prop: '',
+          label: '总件数',
+          rows: 3,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: '重量',
+          rows: 3,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: 'PNR编号',
+          rows: 3,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: '企业或团队名称',
+          rows: 3,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: '常旅客号',
+          rows: 3,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: '常旅客级别',
+          rows: 3,
+          value: '3'
+        }
+      ],
+      detailsArr: [
+        {
+          no: '39998979441'
+        },
+        {
+          no: '39998979441'
+        },
+        {
+          no: '39998979441'
+        }
+      ],
+      activeIndex: null,
+      msgs1: [
+        {
+          prop: '',
+          label: '最新结果',
+          rows: 4,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: '最新状态',
+          rows: 3,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: '特殊行李类型',
+          rows: 3,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: '删除',
+          rows: 3,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: '激活',
+          rows: 3,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: '卷宗号',
+          rows: 3,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: '无BSM',
+          rows: 3,
+          value: '3'
+        }
+      ],
+      msgs2: [
+        {
+          prop: '',
+          label: '赔偿类型',
+          rows: 4,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: '赔偿金额',
+          rows: 3,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: '异常状态',
+          rows: 3,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: '装载序列号',
+          rows: 3,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: '可装载',
+          rows: 3,
+          value: '3'
+        },
+        {
+          prop: '',
+          label: '可运输',
+          rows: 3,
+          value: '3'
+        },
+      ],
+      tabMenu: [
+        {
+          key: 'baggageView',
+          name: '行李流程图'
+        },
+        {
+          key: 'baggageList',
+          name: '行李流程列表信息'
+        },
+        {
+          key: 'baggageMessage',
+          name: '行李报文'
+        },
+      ],
+      tabIndex: 0,
+      componentName: 'baggageView',
+    }
+  },
+  methods: {
+    tagClick (item, index) {
+      this.activeIndex = index
+    },
+    tabClick (item, index) {
+      this.tabIndex = index
+      this.componentName = item.key
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.newBagDetails {
+  height: calc(100vh - 80px);
+  padding: 12px;
+  &-info {
+    height: 200px;
+    background: #051436;
+    color: #fff;
+    font-size: 14px;
+    &-look {
+      padding: 0 32px;
+      height: 64px;
+      line-height: 64px;
+      background: #041741;
+      &-name {
+        font-size: 18px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #ffffff;
+        margin-right: 7px;
+      }
+    }
+    &-details {
+      position: relative;
+      padding: 0 32px;
+      height: 136px;
+      &-tags {
+        height: 32px;
+        line-height: 32px;
+        .tags-view-wrapper {
+          width: calc(100%);
+          ::v-deep .el-scrollbar__wrap {
+            // margin-top: 8.5px;
+          }
+          .tags-view-item {
+            display: inline-block;
+            position: relative;
+            cursor: pointer;
+            height: 32px;
+            line-height: 32px;
+            // border: 1px solid #767eba;
+            // border-radius: 4px;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #aaacb2;
+            margin-right: 100px;
+            &:last-child {
+              margin-right: 0;
+            }
+            &.active {
+              color: #fff;
+              position: relative;
+              &::after {
+                position: absolute;
+                content: "";
+                width: 100%;
+                left: 0;
+                bottom: 0;
+                height: 3px;
+                background: #2d67e3;
+              }
+            }
+          }
+        }
+      }
+      &-msgs {
+        padding: 25px 0;
+        height: 104px;
+        &-l1 {
+          margin-bottom: 22px;
+        }
+      }
+    }
+  }
+  &-contents {
+    margin-top: 8px;
+    background-color: #fff;
+    height: calc(100% - 208px);
+    &-tabs {
+      line-height: 65px;
+      padding: 0 32px;
+      border-bottom: 1px solid #dfe3ea;
+      &-title {
+        font-size: 18px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #303133;
+        margin-right: 92px;
+      }
+      &-btns {
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #afb4bf;
+        &-bt {
+          margin-right: 55px;
+          cursor: pointer;
+          position: relative;
+          &:last-child {
+            margin-right: 0;
+          }
+          &.is-active {
+            color: #303133;
+            &::after {
+              position: absolute;
+              content: "";
+              width: 100%;
+              left: 0;
+              bottom: 0;
+              height: 3px;
+              background: #2d67e3;
+            }
+          }
+        }
+      }
+    }
+    &-page {
+      height: calc(100% - 66px);
+    }
+  }
+}
+</style>