材料信息

 <template>
-  <div class='clxx'>
-    clxxclxxclxxclxxclxxclxx
+  <div class="clxx">
+    <div class="clxx-box">
+      <div class="header">
+        <div class="title">{{ title }}</div>
+      </div>
+      <div class="img-box">
+        <img :src="showImg.imgUrl" alt="" />
+      </div>
+      <div class="img-list">
+        <div class="item" v-for="(item, index) in imgList" :key="index">
+          <img
+            :class="showImg.id == item.id ? 'active' : ''"
+            :src="item.imgUrl"
+            alt=""
+            @click="imgClick(item)"
+          />
+        </div>
+      </div>
+      <div class="btn-group">
+        <el-button>扫描</el-button>
+        <el-button>上传文件</el-button>
+        <el-button icon="el-icon-delete">删除</el-button>
+      </div>
+    </div>
   </div>
 </template>
 <script>
-
 export default {
   /**注册组件*/
   components: {},
-  data () {
+  data() {
     return {
-
+      title: "不动产登记申请书 (1/2)",
+      imgList: [
+        {
+          id: "1",
+          imgUrl: require("../images/1.png"),
+        },
+        {
+          id: "2",
+          imgUrl: require("../images/2.png"),
+        },
+        {
+          id: "3",
+          imgUrl: require("../images/3.png"),
+        },
+      ],
+      showImg: {
+        id: "1",
+        imgUrl: require("../images/1.png"),
+      },
     };
   },
-}
+  methods: {
+    imgClick(item) {
+      this.showImg = item;
+    },
+  },
+};
 </script>
 <style scoped lang='scss'>
+.clxx {
+  width: 100%;
+  height: 100%;
+  &-box {
+    width: 800px;
+    height: 800px;
+    background: #e4e4e4;
+    margin: 0 auto;
+    .header {
+      height: 30px;
+      background: #fff;
+      text-align: center;
+      .title {
+        height: 28px;
+        line-height: 28px;
+        font-size: 13px;
+        padding: 0 8px;
+        border: 1px solid #aaa;
+        display: inline-block;
+      }
+    }
+    .img-box {
+      width: 800px;
+      height: 610px;
+      line-height: 610px;
+      padding: 5px;
+      text-align: center;
+      img {
+        max-height: 600px;
+        max-width: 790px;
+      }
+    }
+    .img-list {
+      width: 100%;
+      height: 80px;
+      line-height: 80px;
+      background: #ccc;
+      text-align: center;
+      .item {
+        display: inline-block;
+        margin: 10px 5px;
+        img {
+          width: 60px;
+          height: 60px;
+          cursor: pointer;
+        }
+        .active {
+          border: 1px solid #fff;
+        }
+      }
+    }
+    .btn-group {
+      width: 100%;
+      height: 80px;
+      line-height: 80px;
+      background: #fff;
+      text-align: center;
+    }
+  }
+}
 </style>
\ No newline at end of file

@@ -65,13 +65,17 @@ class data extends filter {
             prop: "syqqssj",
             label: "使用权起始时间",
           },
-          {
-            prop: "syqjssj",
-            label: "使用权结束时间",
-          },
-          {
-            prop: "tdsyqx",
-            label: "土地使用期限",
+          // {
+          //   prop: "syqjssj",
+          //   label: "使用权结束时间",
+          // },
+          // {
+          //   prop: "tdsyqx",
+          //   label: "土地使用期限",
+          // },
+          {
+            prop: "syqqzsj",
+            label: "使用权起止时间",
           },
           {
             prop: "qdjg",