物料主数据详情页面

components/page/filed.vue

@@ -30,7 +30,6 @@ export default {
     border-top: none;
     height: 100%;
     .filed-col {
-     
       border: 1px solid #ddd;
       border-right: none;
       margin: 0 -1px -1px -1px;
@@ -47,7 +46,6 @@ export default {
         height: 100%;
       }
       p {
-       
         height: 100%;
         word-break: break-all;
         word-wrap: break-word;
@@ -67,4 +65,30 @@ export default {
     }
   }
 }
+.new-detail {
+  .ivu-row {
+    width: 100% !important;
+    .filed-col {
+      box-sizing: border-box;
+      line-height: 70px;
+      .label {
+        display: inline-block;
+        width: 100px;
+        text-align: right;
+        line-height: 40px;
+        float: left;
+        height: 100%;
+        font-weight: bold;
+      }
+      p {
+        text-align: left;
+        height: 100%;
+        word-break: break-all;
+        word-wrap: break-word;
+        line-height: 20px;
+        padding-top: 10px;
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file

pages/materiel/masterData/details.vue

+<template>
+  <Layout class="data-details">
+    <Sider hide-trigger class="left-detail" width="300">
+      <h4 class="bt">标题</h4>
+      <div class="list-tree">
+        <div
+          v-for="(item,index) in listData"
+          :key="index"
+          :class="isactive == index ? 'addclass' : 'item-i'"
+          @click="everyItem(item,index)"
+        >{{item.lable}}</div>
+      </div>
+    </Sider>
+    <Content class="right-detail">
+      <div class="btn">
+        <Button type="primary">编辑</Button>
+        <div class="new-detail">
+          <Row>
+            <Filed :span="8" :name="l('routingHeaderName')+'：'">HHJK就开始上课uioiweiwuuu你和环境</Filed>
+            <Filed :span="8" :name="l('routingDetailName')+'：'">HHJK就开始上课</Filed>
+            <Filed :span="8" :name="l('standard')+'：'">HHJK就开始上课uioiweiwuuu你和环境</Filed>
+            <Filed :span="8" :name="l('routingHeaderName')+'：'">HHJK就开始上课</Filed>
+            <Filed :span="8" :name="l('routingDetailName')+'：'">HHJK就开始上课</Filed>
+            <Filed :span="8" :name="l('standard')+'：'">HHJK就开始上课</Filed>
+          </Row>
+          <Divider />
+          <div class="title-h4">engineering</div>
+          <Row>
+            <Filed :span="8" :name="l('routingHeaderName')+'：'">HHJK就开始上课</Filed>
+            <Filed :span="8" :name="l('routingDetailName')+'：'">HHJK就开始上课</Filed>
+            <Filed :span="8" :name="l('standard')+'：'">HHJK就开始上课uioiweiwuuu你和环境</Filed>
+            <Filed :span="8" :name="l('routingHeaderName')+'：'">HHJK就开始上课</Filed>
+            <Filed :span="8" :name="l('routingDetailName')+'：'">HHJK就开始上课uioiweiwuuu你和环境</Filed>
+            <Filed :span="8" :name="l('standard')+'：'">HHJK就开始上课</Filed>
+          </Row>
+          <Divider />
+          <div class="title-h4">engineering</div>
+          <Row>
+            <Filed :span="8" :name="l('routingHeaderName')+'：'">HHJK就开始上课</Filed>
+            <Filed :span="8" :name="l('routingDetailName')+'：'">HHJK就开始上课</Filed>
+            <Filed :span="8" :name="l('standard')+'：'">HHJK就开始上课</Filed>
+            <Filed :span="8" :name="l('routingHeaderName')+'：'">HHJK就开始上课uioiweiwuuu你和环境</Filed>
+            <Filed :span="8" :name="l('routingDetailName')+'：'">HHJK就开始上课</Filed>
+            <Filed :span="8" :name="l('standard')+'：'">HHJK就开始上课</Filed>
+          </Row>
+        </div>
+      </div>
+    </Content>
+  </Layout>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      isactive: null,
+      listData: [
+        {
+          lable: "属性"
+        },
+        {
+          lable: "图像"
+        },
+        {
+          lable: "图像"
+        },
+        {
+          lable: "图像"
+        },
+        {
+          lable: "图像"
+        }
+      ]
+    };
+  },
+  methods: {
+    everyItem(li, i) {
+      this.isactive = i;
+    },
+    l(key) {
+      key = "routing_qc_card" + "." + key;
+      return this.$t(key);
+    }
+  }
+};
+</script>
+<style lang="less">
+.ivu-layout {
+  background-color: #f5f7f9 !important;
+}
+.data-details {
+  width: 100%;
+  height: 100%;
+
+  .left-detail {
+    background: rgba(255, 255, 255, 1);
+    margin-right: 10px;
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
+    height: 86vh;
+    overflow: auto;
+    .bt {
+      height: 50px;
+      line-height: 50px;
+      padding-left: 15px;
+      background: #f5f6fa;
+    }
+    .list-tree {
+      padding: 10px 0;
+      .item-i {
+        height: 40px;
+        line-height: 40px;
+        padding: 0 15px;
+      }
+      .item-i:hover {
+        cursor: pointer;
+        background: rgba(38, 128, 235, 0.4);
+        color: rgba(38, 128, 235, 1);
+      }
+      .addclass {
+        height: 40px;
+        line-height: 40px;
+        padding: 0 15px;
+        background: rgba(38, 128, 235, 0.4);
+        color: rgba(38, 128, 235, 1);
+      }
+    }
+  }
+  .right-detail {
+    margin-left: 10px;
+    padding: 10px 15px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
+    height: 86vh;
+    overflow: auto;
+    .btn {
+      text-align: right;
+    }
+    .title-h4 {
+      text-align: left;
+      height: 40px;
+      line-height: 40px;
+      color: #2680eb;
+    }
+  }
+}
+</style>
\ No newline at end of file

pages/materiel/masterData/index.vue

 <template>
-    <div>
-        <Button type="dashed">详情</Button> 
-    </div>
-</template>
\ No newline at end of file
+  <div class="master-data">
+    <Button type="dashed" @click="datail">详情</Button>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    datail() {
+      this.$router.push({
+        path: "/materiel/masterData/details"
+      });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.master-data {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file