材料信息样式编写

 <template>
 <template>
   <div class="clxx">
   <div class="clxx">
-    <div class="clxx-box">
+    <div class="left">
+      <div
+        v-for="item in menuList"
+        :key="item.id"
+        :class="['item', checkedId == item.id ? 'checked' : '']"
+        @click="menuClick(item)"
+      >
+        {{ item.label }}
+      </div>
+    </div>
+    <div class="right">
+      <!-- 材料目录明细 -->
+      <div class="clmlmx-box" v-if="checkedId == '1'">
+        <div class="title">申请材料目录</div>
+        <lb-table
+          :column="column"
+          border
+          :key="key"
+          heightNumSetting
+          :pagination="false"
+          :data="tableData"
+        >
+        </lb-table>
+      </div>
+
+      <!-- 材料预览 -->
+      <div class="clyl-box" v-if="checkedId == '2'">
+        <div class="menu-tree">
+          <div class="item" v-for="item in treedata" :key="item.id">
+            {{ item.label }}
+            <i :class="iclass" @click="iconClick()"></i>
+            <el-collapse-transition>
+              <div v-show="menuOpen">
+                <div
+                  v-for="item2 in item.children"
+                  :key="item2.id"
+                  :class="['child', treeCheckId == item2.id ? 'checked' : '']"
+                  @click="treeClick(item2)"
+                >
+                  {{ item2.label }}
+                </div>
+              </div>
+            </el-collapse-transition>
+          </div>
+        </div>
+        <div class="clyl-img">
           <div class="header">
           <div class="header">
             <div class="title">{{ title }}</div>
             <div class="title">{{ title }}</div>
+            <div class="i-group">
+              <i class="el-icon-zoom-in"></i>
+              <i class="el-icon-zoom-out"></i>
+              <i class="el-icon-refresh-right"></i>
+              <i class="el-icon-refresh-left"></i>
+              <i class="el-icon-document"></i>
+            </div>
           </div>
           </div>
           <div class="img-box">
           <div class="img-box">
             <img :src="showImg.imgUrl" alt="" />
             <img :src="showImg.imgUrl" alt="" />
@@ -19,18 +71,197 @@
           </div>
           </div>
           <div class="btn-group">
           <div class="btn-group">
             <el-button>扫描</el-button>
             <el-button>扫描</el-button>
-        <el-button>上传文件</el-button>
+            <el-button icon="el-icon-upload2">上传文件</el-button>
             <el-button icon="el-icon-delete">删除</el-button>
             <el-button icon="el-icon-delete">删除</el-button>
           </div>
           </div>
         </div>
         </div>
       </div>
       </div>
+    </div>
+    <clxxAddDialog v-model="isDialog"/>
+  </div>
 </template>
 </template>
 <script>
 <script>
+import clxxAddDialog from "./clxxAddDialog.vue"
 export default {
 export default {
-  /**注册组件*/
-  components: {},
+  components: {clxxAddDialog},
   data() {
   data() {
     return {
     return {
+      isDialog:false,
+      menuList: [
+        {
+          id: "1",
+          label: "材料目录明细",
+        },
+        {
+          id: "2",
+          label: "材料预览",
+        },
+      ],
+      checkedId: "1",
+      column: [
+        {
+          width: "60",
+          renderHeader: (h, scope) => {
+            return (
+              <i
+                class="el-icon-plus pointer"
+                onClick={() => {
+                  this.handleAdd();
+                }}
+                style="color:#409EFF"
+              ></i>
+            );
+          },
+          render: (h, scope) => {
+            if (scope.row.isAdd) {
+              return (
+                <i
+                  class="el-icon-minus pointer"
+                  onClick={() => {
+                    this.handleMinus(scope.$index, scope.row);
+                  }}
+                ></i>
+              );
+            }
+          },
+        },
+        {
+          width: "60",
+          label: "序号",
+          type: "index",
+        },
+        {
+          prop: "sfbx",
+          label: "是否必选",
+          width: "100",
+        },
+        {
+          prop: "clmc",
+          label: "材料名称",
+        },
+        {
+          prop: "cllx",
+          label: "材料类型",
+        },
+        {
+          prop: "fs",
+          label: "份数",
+        },
+        {
+          prop: "smzt",
+          label: "扫描状态",
+        },
+        {
+          prop: "smys",
+          label: "扫描页数",
+        },
+        {
+          label: "操作",
+          width: "90",
+          render: (h, scope) => {
+            return (
+              <div>
+                <el-button
+                  type="text"
+                  disabled={scope.$index == 0}
+                  onClick={() => {
+                    this.moveUpward(scope.$index, scope.row);
+                  }}
+                >
+                  上移
+                </el-button>
+                <el-button
+                  type="text"
+                  disabled={scope.$index + 1 == this.tableData.length}
+                  onClick={() => {
+                    this.moveDown(scope.$index, scope.row);
+                  }}
+                >
+                  下移
+                </el-button>
+              </div>
+            );
+          },
+        },
+      ],
+      tableData: [
+        {
+          sfbx: "必选",
+          clmc: "不动产登记申请书",
+          cllx: "原件正本",
+          fs: 2,
+          smzt: "已扫描",
+          smys: 4,
+        },
+        {
+          sfbx: "必选",
+          clmc: "申请人身份证明",
+          cllx: "正本复印件",
+          fs: 1,
+          smzt: "已扫描",
+          smys: 6,
+        },
+        {
+          sfbx: "必选",
+          clmc: "土地权属来源材",
+          cllx: "副本复印件",
+          fs: 1,
+          smzt: "未扫描",
+          smys: 0,
+        },
+        {
+          sfbx: "必选",
+          clmc: "不动产权籍调查表",
+          cllx: "副本复印件",
+          fs: 1,
+          smzt: "未扫描",
+          smys: 0,
+        },
+        {
+          sfbx: "必选",
+          clmc: "完税凭证",
+          cllx: "副本复印件",
+          fs: 1,
+          smzt: "未扫描",
+          smys: 0,
+        },
+      ],
+
+      treedata: [
+        {
+          id: "clml",
+          label: "材料目录",
+          children: [
+            {
+              id: "bdcdjsqs",
+              label: "不动产登记申请书",
+            },
+            {
+              id: "sqrsfzm",
+              label: "申请人身份证明",
+            },
+            {
+              id: "tdqslycl",
+              label: "土地权属来源材料",
+            },
+            {
+              id: "bdcqjdcb",
+              label: "不动产权籍调查表",
+            },
+            {
+              id: "wspz",
+              label: "完税凭证",
+            },
+          ],
+        },
+      ],
+      menuOpen: true,
+      treeCheckId: "bdcdjsqs",
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      defaultKey: "bdcdjsqs",
       title: "不动产登记申请书 (1/2)",
       title: "不动产登记申请书 (1/2)",
       imgList: [
       imgList: [
         {
         {
@@ -50,9 +281,30 @@ export default {
         id: "1",
         id: "1",
         imgUrl: require("../images/1.png"),
         imgUrl: require("../images/1.png"),
       },
       },
+      iclass: "itemIcon el-icon-caret-bottom",
     };
     };
   },
   },
   methods: {
   methods: {
+    // 左侧菜单点击
+    menuClick(item) {
+      this.checkedId = item.id;
+    },
+    // 添加材料目录
+    handleAdd() {},
+    // 材料目录关闭收起
+    iconClick() {
+      this.menuOpen = !this.menuOpen;
+      if (this.menuOpen) {
+        this.iclass = "itemIcon el-icon-caret-bottom close";
+      } else {
+        this.iclass = "itemIcon el-icon-caret-bottom open";
+      }
+    },
+    // 材料目录点击选中
+    treeClick(item) {
+      this.treeCheckId = item.id;
+    },
+    // 小图片点击
     imgClick(item) {
     imgClick(item) {
       this.showImg = item;
       this.showImg = item;
     },
     },
@@ -63,40 +315,162 @@ export default {
 .clxx {
 .clxx {
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
-  &-box {
-    width: 800px;
+  display: flex;
+  padding-left: 15px;
+  .left {
+    width: 52px;
+    height: 780px;
+    background: #f3f4f7;
+    border-radius: 1px;
+    .item {
+      width: 42px;
+      height: 50%;
+      margin: 0 0 auto auto;
+      writing-mode: tb;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 16px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      color: #7a7a7a;
+      cursor: pointer;
+      border-right: 1px solid #d9d9d9;
+    }
+    .item.checked {
+      background: #ffffff;
+      border-top: 1px solid #d9d9d9;
+      border-bottom: 1px solid #d9d9d9;
+      border-left: 2px solid #2b7ff1;
+      border-right: none;
+      font-size: 18px;
+      color: #4a4a4a;
+    }
+  }
+  .right {
+    width: calc(100% - 80px);
+    height: 780px;
+    padding: 0 30px;
+
+    .clmlmx-box {
+      width: 100%;
+      height: 530px;
+      margin: 0 auto;
+      border: 1px solid #d9d9d9;
+      background: #f3f4f7;
+      padding: 20px;
+      .title {
+        text-align: center;
+        height: 60px;
+        line-height: 60px;
+        border: 1px solid #dfe6ec;
+        font-size: 20px;
+        background: #81d3f81a;
+        margin-bottom: -1px;
+      }
+    }
+
+    .clyl-box {
+      width: 100%;
+      height: 100%;
+      display: flex;
+
+      .menu-tree {
+        width: 20%;
+        height: 100%;
+        margin-right: 30px;
+        border-right: 1px dotted #d9d9d9;
+        padding: 0 24px;
+        .item {
+          height: 60px;
+          line-height: 60px;
+          border-bottom: 1px solid #e8e8e8;
+          font-size: 16px;
+          color: #4a4a4a;
+          .itemIcon {
+            float: right;
+            line-height: 60px;
+            cursor: pointer;
+          }
+
+          @keyframes open {
+            100% {
+              transform: rotate(180deg);
+            }
+          }
+
+          @keyframes close {
+            0% {
+              transform: rotate(180deg);
+            }
+            100% {
+              transform: rotate(-0deg);
+            }
+          }
+
+          .open {
+            animation: open 0.5s;
+            animation-fill-mode: both;
+          }
+          .close {
+            animation: close 0.5s;
+            animation-fill-mode: both;
+          }
+          .child {
+            height: 60px;
+            line-height: 60px;
+            border-bottom: 1px solid #e8e8e8;
+            padding-left: 18px;
+            color: #6b6b6b;
+            cursor: pointer;
+          }
+          .checked {
+            border-radius: 6px;
+            border: 1px solid #4083f9;
+          }
+        }
+      }
+
+      .clyl-img {
+        width: 75%;
         height: 800px;
         height: 800px;
-    background: #e4e4e4;
+        background: #f3f4f7;
         margin: 0 auto;
         margin: 0 auto;
         .header {
         .header {
-      height: 30px;
-      background: #fff;
-      text-align: center;
+          height: 54px;
+          line-height: 52px;
+          background: #eceef2;
+          border: 1px solid #ededed;
+          padding: 0 0 0 30px;
           .title {
           .title {
-        height: 28px;
-        line-height: 28px;
             font-size: 13px;
             font-size: 13px;
-        padding: 0 8px;
-        border: 1px solid #aaa;
             display: inline-block;
             display: inline-block;
           }
           }
+          .i-group {
+            float: right;
+            height: 100%;
+            i {
+              width: 50px;
+              height: 52px;
+              cursor: pointer;
+            }
+          }
         }
         }
         .img-box {
         .img-box {
           width: 800px;
           width: 800px;
-      height: 610px;
-      line-height: 610px;
+          height: calc(100% - 214px);
           padding: 5px;
           padding: 5px;
           text-align: center;
           text-align: center;
+          margin: 0 auto;
           img {
           img {
-        max-height: 600px;
-        max-width: 790px;
+            max-height: 100%;
+            max-width: 100%;
           }
           }
         }
         }
         .img-list {
         .img-list {
           width: 100%;
           width: 100%;
           height: 80px;
           height: 80px;
           line-height: 80px;
           line-height: 80px;
-      background: #ccc;
+          background: #eceef2;
           text-align: center;
           text-align: center;
           .item {
           .item {
             display: inline-block;
             display: inline-block;
@@ -119,5 +493,7 @@ export default {
           text-align: center;
           text-align: center;
         }
         }
       }
       }
+    }
+  }
 }
 }
 </style>
 </style>
\ No newline at end of file

+<template>
+  <dialogBox title="新建材料信息" width="60%">
+
+  </dialogBox>
+</template>
+
+<script>
+export default {
+  props: {
+
+  },
+
+  data () {
+    return {}
+  },
+  methods: {}
+}
+</script>
+<style scoped lang="scss">
+</style>