Browse Source

详情页样式布局

zhangyu 5 years ago
parent
commit
9ec2776d93

+ 29 - 8
src/components/data_admin/buildTask/detail/assetsDetail.vue

@@ -1,5 +1,10 @@
 <template>
-  <div></div>
+  <div class="detail-box">
+    <el-scrollbar style="height:100%;">
+      <div class="attribute-detail"></div>
+      <div class="implement-detail"></div>
+    </el-scrollbar>
+  </div>
 </template>
 
 <script>
@@ -39,12 +44,28 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.table-container {
-  height: 100%;
-  background: #fff;
-  .table-button{
-    cursor: pointer;
-    margin-right: 15px;
+  .detail-box{
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden;
+    }
+    .attribute-detail{
+      width: calc(100% - 30px);
+      height: 500px;
+      margin: 15px 15px 10px;
+      box-sizing: border-box;
+      border-left: 1px solid #eee;
+      box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
+    }
+    .implement-detail{
+      width: calc(100% - 30px);
+      height: 500px;
+      margin: 15px 15px 10px;
+      box-sizing: border-box;
+      border-left: 1px solid #eee;
+      box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
+    }
   }
-}
 </style>

+ 0 - 49
src/components/data_admin/buildTask/detail/deviceDeatil.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="detail-box">
-
-  </div>
-</template>
-
-<script>
-import {  } from "@/api/scan/request"
-import { mapGetters } from "vuex"
-export default {
-  components: {
-    
-  },
-  computed: {
-    ...mapGetters("layout", ["projectId"])
-  },
-  props: {
-    id: String,
-  },
-  data() {
-    return {
-      
-    };
-  },
-  created() {
-    
-  },
-  methods: {
-    
-  },
-  watch: {
-    id: {
-      handler(newName, oldName) {
-        // this.page.pageNumber = 1
-        // this.getTableData()
-      },
-      immediate: true,
-      deep: true
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-  .detail-box{
-    width: 100%;
-    height: 100%;
-    border: 1px solid #333;
-  }
-</style>

+ 71 - 0
src/components/data_admin/buildTask/detail/deviceDetail.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="detail-box">
+    <el-scrollbar style="height:100%;">
+      <div class="attribute-detail"></div>
+      <div class="implement-detail"></div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import {  } from "@/api/scan/request"
+import { mapGetters } from "vuex"
+export default {
+  components: {
+    
+  },
+  computed: {
+    ...mapGetters("layout", ["projectId"])
+  },
+  props: {
+    id: String,
+  },
+  data() {
+    return {
+      
+    };
+  },
+  created() {
+    
+  },
+  methods: {
+    
+  },
+  watch: {
+    id: {
+      handler(newName, oldName) {
+        // this.page.pageNumber = 1
+        // this.getTableData()
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+  .detail-box{
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden;
+    }
+    .attribute-detail{
+      width: calc(100% - 30px);
+      height: 500px;
+      margin: 15px 15px 10px;
+      box-sizing: border-box;
+      border-left: 1px solid #eee;
+      box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
+    }
+    .implement-detail{
+      width: calc(100% - 30px);
+      height: 500px;
+      margin: 15px 15px 10px;
+      box-sizing: border-box;
+      border-left: 1px solid #eee;
+      box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
+    }
+  }
+</style>

+ 7 - 0
src/components/data_admin/buildTask/table/assetsTable.vue

@@ -176,6 +176,13 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+/deep/ .el-drawer__body {
+  height: calc(100% - 80px);
+  border-top: 1px solid #c9c9c9;
+}
+/deep/ .el-drawer__header {
+  margin-bottom: 12px;
+}
 .table-container {
   height: 100%;
   background: #fff;

+ 7 - 0
src/components/data_admin/buildTask/table/deviceTable.vue

@@ -176,6 +176,13 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+/deep/ .el-drawer__body {
+  height: calc(100% - 80px);
+  border-top: 1px solid #c9c9c9;
+}
+/deep/ .el-drawer__header {
+  margin-bottom: 12px;
+}
 .table-container {
   height: 100%;
   background: #fff;

+ 9 - 2
src/components/data_admin/buildTask/table/modelTable.vue

@@ -36,7 +36,7 @@
      :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
     </el-pagination>
     <el-drawer title="任务详情" :visible.sync="drawer" direction="rtl" size="600px">
-      <device-deatil :id="detailId"></device-deatil>
+      <device-detail :id="detailId"></device-detail>
     </el-drawer>
   </div>
 </template>
@@ -44,7 +44,7 @@
 <script>
 import {  } from "@/api/scan/request"
 import { mapGetters } from "vuex"
-import deviceDetail from '../detail/deviceDeatil'
+import deviceDetail from '../detail/deviceDetail'
 export default {
   components: {
     deviceDetail
@@ -169,6 +169,13 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+/deep/ .el-drawer__body {
+  height: calc(100% - 80px);
+  border-top: 1px solid #c9c9c9;
+}
+/deep/ .el-drawer__header {
+  margin-bottom: 12px;
+}
 .table-container {
   height: 100%;
   background: #fff;